/**
 * 功能描述: 基础进度条样式表
 * @author 崔孝楠
 * @date 2022/9/21 17:38
 * @version 1.0
 */
@import '../../style/index';
// 进度条圆角尺寸
$progress-border-radius: 100px;
// 进度条基础布局
@mixin progress--layout {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: inline-block;
  line-height: $line-height-base;
}
// 线性进度条布局
@mixin progress-line--layout {
  position: relative;
  width: 100%;
}
// 进度条内部布局
@mixin progress-inner--layout {
  position: relative;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  vertical-align: middle;
}
// 背景布局
@mixin progress-bg--layout {
  position: relative;
}
// 文字布局
@mixin progress-text--layout {
  display: inline-block;
  width: 2em;
  margin-left: 8px;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
  word-break: normal;
}
// 进度条基础样式
@include b(progress) {
  color: $color-text-primary;
  font-size: $font-size-base;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: 'tnum';
  @include progress--layout
}
// 线性进度条样式
@include b(progress-line) {
  font-size: $font-size-base;
  @include progress-line--layout;
}
// 进度条外部布局
@include b(progress-outer) {
  display: inline-block;
  width: 100%;
  margin-right: 0;
  padding-right: 0;
}
// 展示文字布局
@include b(progress-show-info) {
  @include b(progress-outer) {
    margin-right: calc(-2em - 8px);
    padding-right: calc(2em + 8px);
  }
}
// 进度条内部样式
@include b(progress-inner) {
  background-color: $background-color-base;
  border-radius: $progress-border-radius;
  @include progress-inner--layout;
}
// 背景样式
@include b(progress-bg) {
  background-color: $color-primary;
  border-radius: $progress-border-radius;
  transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
  @include progress-bg--layout;
}
// 文字样式
@include b(progress-text) {
  color: $color-text-primary;
  font-size: 1em;
  @include progress-text--layout;
}
